<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="商机名称" prop="orderId">
        <el-select
          v-model="queryParams.orderId"
          filterable
          clearable
          placeholder="请选择商机"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in searchOrder"
            :key="item.orderId"
            :label="item.orderName"
            :value="item.orderId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="客户" prop="customerI">
        <el-select
          v-model="queryParams.customerId"
          filterable
          clearable
          placeholder="请选择客户"
          size="small"
          style="width: 100%"
        >
          <el-option
            v-for="item in customerList"
            :key="item.customerId"
            :label="item.customerName"
            :value="item.customerId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="负责人" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入负责人"
          clearable
          filterable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="研发人员" prop="devUserId">
        <el-select
          v-model="queryParams.devUserId"
          placeholder="请选择"
          multiple
          style="width: 100%"
          size="small"
          filterable
        >
          <el-option
            v-for="item in devExpertList"
            :key="item.expertId"
            :label="item.expertName"
            :value="item.expertId"
          >
            <span style="float: left">{{ item.expertName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">
              <dict-tag
                :options="dict.type.crm_expert_type"
                :value="item.expertType"
              />
            </span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="实施人员" prop="opsUserId">
        <el-select
          v-model="queryParams.opsUserId"
          placeholder="请选择"
          multiple
          style="width: 100%"
          size="small"
          filterable
        >
          <el-option
            v-for="item in opsExpertList"
            :key="item.expertId"
            :label="item.expertName"
            :value="item.expertId"
          >
            <span style="float: left">{{ item.expertName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">
              <dict-tag
                :options="dict.type.crm_expert_type"
                :value="item.expertType"
              />
            </span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <div v-if="projectList.length > 0">
      <div style="margin-top: 15px" class="body-box" v-loading="loading">
        <div class="waterfall-layout">
          <div
            v-for="project in projectList"
            :key="project.projectId"
            class="project-card"
          >
            <div class="card" >
              <div class="header">
                <h2 class="titel">
                  商机名称: {{ project.orderName }}
                  <el-dropdown
                    trigger="click"
                    @click.native.stop
                    style="float: right; font-size: 1.2em; color: #0277bd"
                  >
                    <label><i class="el-icon-s-operation"></i></label>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        icon="el-icon-edit-outline"
                        @click.native.stop="openAddWorkLog(project)"
                        >新增维保记录</el-dropdown-item
                      >
                      <el-dropdown-item
                        icon="el-icon-edit"
                        @click.native.stop="openWorkLogDetails(project)"
                        >维保记录</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </h2>
                <div class="details">
                  <p>负责人: {{ project.createBy }}</p>
                  <p>客户名称: {{ project.customerName }}</p>
                  <p>
                    运维人员: {{ coverUserId(null, null, project.opsUserId) }}
                  </p>
                  <p>
                    开发人员: {{ coverUserId(null, null, project.devUserId) }}
                  </p>
                  <p>我的工单: {{ project.myTaskCount }}    天</p>
                  <p>进度: {{ coverNumber(project, null, null) }}</p>
                  <div class="total-amount">
                    <p>工单金额: {{taskMoney(project) }}   元</p>
                  </div>
                
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <workLogDetail ref="workLogDetail"></workLogDetail>
    <addWorklog ref="addWorklog"></addWorklog>
    <taskDetailsDialog ref="taskDetailsDialog"></taskDetailsDialog>
  </div>
</template>

<script>
import { getCrmProjectListByUser } from "@/api/crm/project";

import { getExpertList } from "@/api/crm/expert";

import { getCustomerList } from "@/api/crm/customer";

import taskDetailsDialog from "../components/pc/taskDetailsDialog.vue";

import { getOrderListAll } from "@/api/crm/order";

import { getExpertByName } from "@/api/crm/expert";
import addWorklog from "../components/pc/addWorklog.vue";
import workLogDetail from "../components/pc/workLogDetail.vue";
export default {
  name: "Project",
  dicts: ["crm_expert_type"],
  props: {
    projectId: {
      type: String,
    },
  },
  components: { addWorklog, workLogDetail, taskDetailsDialog },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 项目表格数据
      projectList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId: null,
        userId: null,
        opsUserId: null,
        devUserId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      devExpertList: [],
      opsExpertList: [],
      customerList: [],
      orderList: [],
      searchOrder: [],
      exportInfo: {},
    };
  },
  created() {},
  methods: {
    getData() {
      this.getList();
      this.getExpertList();
      this.getCustomerList();
      this.getExpertByName();
      this.getOrderList();
      if (this.projectId) {
        this.$nextTick(() => {
          this.openWorkLogDetails({ projectId: this.projectId });
        });
      }
    },
    toTaskDetail(orderId) {
      this.$refs.taskDetailsDialog.open(orderId, this.$store.getters.name, "1");
    },
    coverNumber(row, column, cellValue) {
      row.opsEstimateTaskCount = isNaN(row?.opsEstimateTaskCount)
        ? 0
        : row.opsEstimateTaskCount;

      row.devEstimateTaskCount = isNaN(row?.devEstimateTaskCount)
        ? 0
        : row.devEstimateTaskCount;

      let count = row.opsEstimateTaskCount + row.devEstimateTaskCount;

      const percentage = count === 0 ? 0 : (row.actualTaskCount / count) * 100;
      return Number.isNaN(percentage) || !Number.isFinite(percentage)
        ? "暂无数据"
        : `${percentage.toFixed(2)}%`;
    },
    getOrderList() {
      getOrderListAll({}).then((res) => {
        this.searchOrder = res.data;
      });
    },
    getExpertByName() {
      getExpertByName(this.$store.getters.name).then((res) => {
        this.exportInfo = res.data;
      });
    },
    openWorkLogDetails(row) {
      this.$refs.workLogDetail.open(row);
    },
    openAddWorkLog(row) {
      this.$refs.addWorklog.open(row);
    },
    taskMoney(row) {
            return (
              row.myTaskCount *
              (!this.exportInfo
                ? '0'
                : this.exportInfo.externalGrade === '0'
                ? 30
                : 50)
            );
          },
    coverUserId(row, column, cellValue) {
      if (!cellValue) return "无";
      let userStr = "";
      let arr = cellValue.split(",").map(Number);
      let index = 0;
      let expertList = this.opsExpertList.concat(this.devExpertList);
      arr.forEach((item) => {
        let name = expertList.find(
          (expert) => expert.expertId == item
        )?.expertName;

        userStr += index === 0 ? name : "," + name;
        index++;
      });

      return userStr;
    },
    getExpertList() {
      getExpertList({ expertType: "0" }).then((res) => {
        this.devExpertList = res.data;
      });
      getExpertList({ expertType: "1" }).then((res) => {
        this.opsExpertList = res.data;
      });
    },
    getCustomerList() {
      getCustomerList().then((res) => {
        this.customerList = res.data;
      });
    },
    /** 查询项目列表 */
    getList() {
      this.loading = true;
      let obj = JSON.parse(JSON.stringify(this.queryParams));
      if (this.queryParams.opsUserId) {
        obj.opsUserId = this.queryParams.opsUserId.join(",");
      }
      if (this.queryParams.devUserId) {
        obj.devUserId = this.queryParams.devUserId.join(",");
      }
      getCrmProjectListByUser(obj).then((response) => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        projectId: null,
        orderId: null,
        userId: null,
        opsUserId: null,
        devUserId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.customerId = null;
      this.queryParams.opsUserId = null;
      this.queryParams.devUserId = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.projectId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "crm/project/export",
        {
          ...this.queryParams,
        },
        `project_${new Date().getTime()}.xlsx`
      );
    },
  },
};

</script>

<style scoped>
.list-todo {
  color: white;
  background-color: #1c8ef0;
  padding: 15px;
  border-radius: 10px;
}

.waterfall-layout {
  column-count: 2;
  column-gap: 15px;
}

.project-card {
  margin-bottom: 15px;
  break-inside: avoid;
}

.body-box {
  max-height: 65vh;
  min-height: 60vh;
  overflow: auto;
}

.pagination-container {
  margin-top: 0;
  height: 20px;
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

.el-table .el-table__row:hover {
  background-color: transparent !important; /* 去掉 hover 背景色 */
}
</style>
